專案資訊

專案名稱：語音卡片筆記 (Voice Card Notes)-錄音轉文字機器人OAO

開發狀態：已上線，持續維護、優化、拓展筆記功能中，未經歷大量測試

專案簡介：一個掛在 LINE LIFF 裡的輕量級語音轉文字與 AI 摘要工具。開會或上課時自己還得寫筆記，真麻煩，讓說話的人自己說出筆記就好啦。
這款工具能邊講話邊生成文字卡片，並提供合併、排序、編輯與一鍵生成 AI 摘要功能。此外，還支援多人接力錄音，透過共用的 Google Sheet 跨團隊整合筆記與摘要。

必要連結

GitHub 專案原始碼：https://github.com/kenyuiyui/voice-to-text-line-bot-LIFF

Line 官方帳號邀請連結：https://liff.line.me/2011273067-abYzT84Y

開發動機
目前在上大學，基於之前小組報告經驗，我有發現大家在上課面對面時，討論的內容可以說是“說完就忘”
所以我就想是不是要有個書記官幫忙筆記，但眾所周知寫不快理還亂，那就直接用錄音轉文字然後直發line群組就好啦~

技術架構

本專案採用純前端（Single HTML Page）無後端伺服器架構，資料與 Key 皆存於瀏覽器端，大幅降低維護成本與資安風險：

1. 前端介面：原生 HTML / JavaScript + CSS，五大分頁式設計（錄音、筆記、共享、摘要、設定）

2. LINE 整合：LINE LIFF SDK（處理好友身分驗證、傳送訊息至聊天室與 Share Target Picker 分享）

3. 語音錄製與轉寫：Web MediaRecorder API 搭配 Groq Whisper API (whisper-large-v3-turbo)，實作每 15 秒自動切分段落並即時生成卡片

4. AI 摘要生成：Google Gemini API，可混合個人筆記與共享表格資料進行客製化摘要及簡易心智圖

5. 個人化多人資料庫：透過 Google Sheets CSV 匯出端點讀取 JSON 格式資料，填入分享連結以下載雲端儲存文字與摘要

6. 安全性與持久化：使用 localStorage 保存草稿與 API Keys

核心特色與功能

• 🎙️ 即時錄音與卡片化：邊講話邊生成卡片，支援編輯、合併句子、調整順序。

• 📖 零後端的 Google Sheet 多人協作：多人接力錄音時，各自複製「Sheet 貼上格式」的 JSON 磁磚貼至同一份共用表格，即可透過 LIFF 讀取並跨來源勾選、生成整合摘要。

• 🔢 自訂勾選順序摘要：AI 摘要的上下文順序完全依使用者點擊勾選的先後順序決定，並即時顯示順序編號。

• 📥 彈性發送與斷點續傳：支援直接傳回 LINE 聊天室或分享給好友；長文字自動分批發送，中途中斷可接續傳送。

• 🚧 開發過程中遇到的技術難題與解決方案

瀏覽器錄音與即時轉寫的體驗平衡

*挑戰：長音訊如果等錄完才一次送出轉寫，使用者會等太久，且容易因網路中斷而丟失整段語音。

*解法：利用 MediaRecorder 設定分段，每 15 秒自動切割音訊塊並非同步送往 Groq Whisper API 轉寫，實現「講話的同時，文字卡片陸續跳出」的流暢體驗。

不安裝資料庫，如何實現「多人共享筆記」？

*挑戰：專案定位為免費純前端工具，不想架設額外的 Database 與 Backend Server。

*解法：設計一套專用的單一儲存格 JSON 資料包結構。使用者點擊「複製成 Sheet 貼上格式」後，貼到 Google Sheet 任何空白儲存格，LIFF 端則利用 Google Sheet 公開 CSV 匯出端點讀取並解析。搭配自撰的 CSV Parser 解決多行內文與 JSON 雙引號的解析問題，達成零成本的多人共享機制！

LINE LIFF 環境下的安全性與資料防護

*挑戰：API Key 與語音草稿皆儲存於 Client 端，需確保安全性與防範 XSS 攻擊。

*解法：嚴格設定 Content Security Policy (CSP) 限制非授權的外部資源調用，外連 CDN 資源全部補上 SRI (Subresource Integrity) 雜湊驗證；同時提供精細的本機資料逐項刪除機制。

結語與心得

這個專案雖然沒有複雜的後端架構，但透過組合 LIFF + Whisper + Gemini + Google Sheet，成功打造出一個真正解決我自己日常需求的「輕量級生產力小工具」！

歡迎大家點擊 Demo 連結玩玩看
https://liff.line.me/2011273067-abYzT84Y